<template>
  <div class="signUp-container">
    <div class="list-group1">
      <van-pull-refresh :disabled="refreshDisabled" v-model="isLoading" @refresh="onRefresh" pulling-text="加载中..." loosing-text="加载中..." loading-text="loading">
        <div class="list-group" ref="scrollbars" @scroll="scrollbarTop">
          <van-list loading-text="加载中" v-model="loading" :finished="finished" :finished-text="listData.length > 0 ? '没有更多了' : ''" @load="initAjaxMethod">
            <van-cell-group>
              <van-cell :value="item.createtime" v-for="(item,index) in listData" is-link :title="item.name" :key="index" @click="goToDetail(item)"></van-cell>
            </van-cell-group>

          </van-list>
          <empty v-if="listData.length == 0"></empty>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
  <script>
import { getdate } from "@/utils/utils";
import { PullRefresh, List, Toast, Cell, CellGroup } from 'vant';
export default {
  name: "match",
  components: {
    [PullRefresh.name]: PullRefresh, [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      refreshDisabled: false,
      loading: false,
      finished: true,
      isLoading: false,
      menuId: 3,
      baseUrl: this.$API.ASSET_IMAGES_URL,
      query: {
        pageIndex: 1,
        pageSize: 10,
        keyword: ''
      },
      total: 0,
      listData: [],

    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return '';
      return getdate(e);
    }
  },
  mounted() {
    this.initAjaxMethod();
  },
  methods: {
    onSearch() {
      this.onRefresh();
    },
    scrollbarTop(e) {
      this.scrollTop = e.target.scrollTop;
      if (this.scrollTop > 100) {
        this.refreshDisabled = true;
      } else {
        this.refreshDisabled = false;
      }
    },
    onRefresh() {
      this.isLoading = true;
      this.query.pageIndex = 1;
      this.query.keyword = '';
      this.listData = [];
      this.finished = false;
      this.loading = true;
      this.$refs['scrollbars'].scrollTop = 0;
      this.initAjaxMethod();
    },
    goToDetail(data) {
      this.$router.push({ path: '/perOffice/signUpDetail', query: { id: data.id } });
    },
    //列表加载
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_PEROFFICE_WORKMYSIGNUP, this.query)
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            let isOver = list.length < this.query.pageSize ? true : false;
            this.finished = isOver;
            this.loading = false;
            this.isLoading = false;
            this.listData = this.query.pageIndex == 1 ? list : [...this.listData, ...list];
            this.total = res.data.total;
            if (!isOver) {
              this.query.pageIndex++;
            }
          }
        });
    }
  },
};
  </script>
  <style lang="less">
.signUp-container {
  .list-group1 {
    padding: 0;
  }
}
</style>
    